<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="售后/退款" />
        <view class="content">
            <view class="card">
                <view class="tip fb-28"> 选择退款项目 </view>

                <view class="sub f-26 flex align-center just-between">
                    <text class="order_sn">
                        订单编号：{{ orders.order_sn }}
                    </text>
                    <text class="order_status">{{ orders.status_text2 }}</text>
                </view>

                <view
                    class="orderInfo f-26 flex align-center"
                    v-if="orders.goods"
                >
                    <view class="radio" @click="onChecked">
                        <image
                            v-if="checked"
                            class="icon"
                            src="/static/technician/joinUs/radioSuccess.png"
                        />
                        <image
                            v-else
                            class="icon"
                            src="/static/technician/joinUs/radio.png"
                        />
                    </view>
                    <view class="order flex align-center">
                        <image
                            class="orderImg"
                            :src="orders.goods.service_cover"
                        />
                        <view class="info fb-28">
                            <view class="title fb-30 flex column">
                                {{ orders.goods.service_name }}
                            </view>
                            <view class="technician f-26">
                                服务师:{{ orders.technician.name }}
                            </view>
                            <view class="time f-24 flex align-center">
                                <image
                                    class="lock"
                                    src="/static/technician/joinUs/lock.png"
                                />
                                <text> {{ orders.time_long }}分钟</text>
                            </view>
                            <view class="price fb-26"
                                >{{ orders.total_price }}
                            </view>
                        </view>
                    </view>
                </view>

                <view class="subInfo f-28">
                    <view class="item">
                        <text class="tit">项目金额:</text>
                        <text class="price">{{ orders.service_price }}</text>
                    </view>
                    <view class="item">
                        <text class="tit">物料费:</text>
                        <text class="price">{{ orders.material_price }}</text>
                    </view>
                    <view class="item line">
                        <view>
                            <text class="tit">车费:</text>
                            <text class="tip">
                                服务师出发前可退回，出发后不可退
                            </text>
                        </view>
                        <text class="price">{{ orders.car_price }}</text>
                    </view>
                    <view class="item">
                        <text class="tit">合计:</text>
                        <text class="price allPrice">
                            {{ orders.total_price }}
                        </text>
                    </view>
                </view>
            </view>

            <!-- 退款原因 -->
            <view class="card">
                <view class="reason">
                    <view class="tit fb-28"> 退款原因 </view>
                    <textarea
                        class="textarea f-28"
                        placeholder="请输入退款原因"
                        maxlength="100"
                        placeholder-class="placeholder"
                        v-model="content"
                    ></textarea>
                    <text class="num">{{ content.length }}/100</text>
                </view>
            </view>

            <!-- 上传图片 -->
            <view class="card">
                <view class="uploads">
                    <view class="tit fb-28"> 上传图片 </view>
                    <view
                        class="upload"
                        :class="listImg.length > 3 ? 'wrap' : ''"
                    >
                        <view
                            class="itempic"
                            v-for="(item, index) in listImg"
                            :key="index"
                        >
                            <image class="pic" :src="item" mode="scaleToFill" />
                            <image
                                class="remove"
                                @click="onRemoveImg(item, index)"
                                src="/static/technician/joinUs/err.png"
                            />
                        </view>
                        <image
                            v-if="listImg.length < 8"
                            @click="onUploadImg"
                            class="add itempic"
                            src="/static/technician/joinUs/uploadimg.png"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
            </view>

            <!-- 退款说明 -->
            <view class="card">
                <view class="tit fb-28"> 退款说明 </view>
                <rich-text
                    class="rich"
                    :nodes="orders.RefundDescription"
                ></rich-text>
            </view>
        </view>
        <view class="btns">
            <view class="btn" @click="submit"> 提交申请 </view>
        </view>
    </div>
</template>
<script>
import { orderDetail } from "@/API/order.js";
import { applyRefund } from "@/API/recruit.js";
export default {
    data() {
        return {
            orders: {},
            checked: true,
            content: "",
            listImg: [],
            contents: "",
            id: "",
        };
    },

    onLoad(options) {
        this.id = options.order_id;
        this.getData();
    },

    methods: {
        // 单选
        onChecked() {
            this.checked = !this.checked;
        },
        // 获取详情
        getData() {
            orderDetail(this.id)
                .then((res) => {
                    this.orders = res.data;
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
        // 提交申请
        submit() {
            if (!this.checked) {
                uni.showToast({
                    title: "请勾选需要申请退款的服务",
                    icon: "none",
                });
                return;
            }
            if (this.content == "") {
                uni.showToast({
                    title: "请填写退款原因",
                    icon: "none",
                });
            } else {
                applyRefund({
                    order_id: this.id,
                    refund_text: this.content,
                    images: this.listImg,
                })
                    .then((res) => {
                        uni.redirectTo({
                            url: "/subPages/technician/recruit/ToBeReviewed",
                        });
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: err.msg,
                            icon: "none",
                        });
                    });
            }
        },
        // 删除图片
        onRemoveImg(item, index) {
            this.listImg.splice(index, 1);
        },
        // 上传图片
        onUploadImg() {
            uni.chooseImage({
                count: 8 - this.listImg.length,
                sizeType: ["original", "compressed"],
                sourceType: ["album", "camera"],
                success: (res) => {
                    uni.uploadFile({
                        url: "https://www.manmiao.online/api/common/upload",
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        success: (uploadFileRes) => {
                            this.listImg.push(
                                JSON.parse(uploadFileRes.data).data.fullurl
                            );
                        },
                    });
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx 20rpx 150rpx 20rpx;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    .tit {
        margin-bottom: 20rpx;
    }
    .tip {
        margin-bottom: 20rpx;
    }
    .sub {
        margin-bottom: 20rpx;
        .order_status {
            color: $theme-color;
        }
    }
    .orderInfo {
        border-top: 2rpx solid #ececec;
        border-bottom: 2rpx solid #ececec;
        padding: 30rpx 0;
        box-sizing: border-box;
        .radio {
            width: 50rpx;
        }
        .order {
            flex: 1;
            .info {
                height: 100%;
                margin-left: 20rpx;
                > view {
                    line-height: 1.8;
                }
                .technician,
                .time {
                    color: #a3a3a3;
                    font-weight: normal;
                    > text {
                        margin-left: 6rpx;
                    }
                }
                .price {
                    color: #f43000;
                }
                .price::before {
                    content: "¥";
                    font-size: 22rpx;
                    margin-right: 6rpx;
                }
            }
        }
    }
    .subInfo {
        box-sizing: border-box;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 0;
            .tit {
                color: #333;
            }

            .tip {
                color: #f43000;
                margin: 0 0 0 20rpx;
            }
            .price::before {
                content: "¥";
                font-size: 28rpx;
                margin-right: 5rpx;
            }
            .allPrice {
                color: #f43000;
            }
        }
        .line {
            border-bottom: 2rpx solid #ececec;
        }
    }
    .reason {
        position: relative;
        .textarea {
            width: 100%;
            height: 300rpx;
            padding: 20rpx;
            box-sizing: border-box;
            border-radius: 10rpx;
            background: #f7f7f7;
            margin: 20rpx 0;
        }
        .num {
            text-align: right;
            color: #999;
            font-size: 24rpx;
            position: absolute;
            right: 20rpx;
            bottom: 20rpx;
        }
    }

    .uploads {
        .tit {
            margin-bottom: 20rpx;
        }
        .upload {
            display: flex;
            flex-wrap: wrap;
            .itempic {
                width: 160rpx;
                height: 160rpx;
                border-radius: 10rpx;
                margin: 10rpx 7rpx 10rpx 0;
                position: relative;
                .pic {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
                .remove {
                    position: absolute;
                    right: -8rpx;
                    top: -10rpx;
                    width: 36rpx;
                    height: 36rpx;
                    z-index: 1;
                }
            }
            .add {
                background: #f5f5f5;
                color: #999;
            }
        }
    }
}
.card {
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx 24rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
}
.icon {
    width: 36rpx;
    height: 36rpx;
}
.lock {
    width: 24.15rpx;
    height: 24.15rpx;
}
.orderImg {
    width: 176rpx;
    height: 176rpx;
    border-radius: 10rpx;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
    z-index: 99999;
    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: linear-gradient(90deg, #5d64ca 0%, #6f9bdf 100%);
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}

.rich {
    color: #999999;
    line-height: 1.4;
}
</style>